// 真正创建节点，将vnode创建为DOM，插入到 pivot 这个元素之前
export default function createElement (vnode) {
  console.log('目的是把虚拟节点', vnode, '变成真正的DOM')
  // 创建一个dom节点，这个节点暂时还没有插入到视图中
  const domNode = document.createElement(vnode.sel)
  // 是子节点还是有文本
  if (
    vnode.text != '' &&
    (vnode.children === undefined || vnode.children.length === 0)
  ) {
    // 它内部是文本
    // 给创建的节点，添加上文字
    domNode.innerText = vnode.text
  } else if (Array.isArray(vnode.children) && vnode.children.length > 0) {
    // 它内部是子节点，需要递归创建子节点
    for (let i = 0; i < vnode.children.length; i++) {
      // 得到当前这个ch
      const ch = vnode.children[i]
      // 创建出它的DOM，一旦调用createElement意味着：创建出DOM了，并且它的elm属性指向了创建出的DOM，但是还没有上树，是一个孤儿节点
      const chDOM = createElement(ch)
      // 上树
      domNode.appendChild(chDOM)
    }
  }

  // 补充elm属性
  vnode.elm = domNode

  // 返回elm，elm属性是一个纯dom的对象
  return vnode.elm
}
